<template>
	<view>
		<view style="box-sizing: border-box;" :style="'height:' + Number(windowHeight*2 - 45) + 'rpx'">
			<bookManagement v-show="page_index == 0" v-on:isBack="toBack" :windowWidth="windowWidth" :windowHeight="windowHeight" :naviBarHeight="naviBarHeight"
			 :statusBarHeight="statusBarHeight"></bookManagement>
			 <borrowingList v-show="page_index == 1" v-on:isBack="toBack" :windowWidth="windowWidth" :windowHeight="windowHeight" :naviBarHeight="naviBarHeight"
			  :statusBarHeight="statusBarHeight"></borrowingList>
			  <bookList v-show="page_index == 2" v-on:isBack="toBack" :windowWidth="windowWidth" :windowHeight="windowHeight" :naviBarHeight="naviBarHeight"
			   :statusBarHeight="statusBarHeight"></bookList>
		</view>

		<view class="bottom-bar">
			<view class="bottom-bar__unit" @tap="clickTab(0)">
				<image class="img" :src="page_index == 0?'/static/icon/home_icon_shujia_1.png':'/static/icon/home_icon_shujia_0.png'"
				 style="" mode=""></image>
				<view class="text" :class="page_index == 0?'pitch-on':''">
					书架
				</view>
			</view>
			<view class="bottom-bar__unit" @tap="clickTab(1)">
				<image class="img" :src="page_index == 1?'/static/icon/home_icon_jieyue_1.png':'/static/icon/home_icon_jieyue_0.png'"
				 mode=""></image>
				<view class="text" :class="page_index == 1?'pitch-on':''">借阅列表</view>
			</view>

			<view class="bottom-bar__unit" @tap="clickTab(2)">
				<image class="img" :src="page_index == 2?'/static/icon/home_icon_mybook_1.png':'/static/icon/home_icon_mybook_0.png'"
				 mode=""></image>
				<view class="text" :class="page_index == 2?'pitch-on':''">我的书单</view>
			</view>
		</view>


	</view>
</template>

<script>
	import bookList from '@/components/library/bookList.vue';
	import bookManagement from '@/components/library/bookManagement.vue';
	import borrowingList from '@/components/library/borrowingList.vue';
	export default {
		components: {
			bookList,
			bookManagement,
			borrowingList,
		},
		data() {
			return {
				windowWidth: 0, //屏幕宽度
				windowHeight: 0, //屏幕高度
				titleHeight: 0, //状态栏和导航栏的总高度
				statusBarHeight: 0, //状态栏高度
				naviBarHeight: 0, //导航栏高度
				page_index: 0, //页面下标
			}
		},
		onLoad() {
			let self = this;
			const res = uni.getSystemInfoSync()
			const system = res.platform
			self.statusBarHeight = res.statusBarHeight
			if (system === 'android') {
				self.titleHeight = (48 + self.statusBarHeight)
			} else if (system === 'ios') {
				self.titleHeight = (44 + self.statusBarHeight)
			}
			self.naviBarHeight = self.titleHeight - self.statusBarHeight

			self.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			self.windowWidth = uni.getSystemInfoSync().windowWidth;
			self.windowHeight = uni.getSystemInfoSync().windowHeight;
		},
		methods: {
			clickTab(index) {
				this.page_index = index;
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			},
		},

	}
</script>

<style lang="scss">
	swiper-item{
	height:200px //这里可以设置比上面高度小（留出大标语位置）或者设置一样大
	}
	.bottom-bar {
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		height: 100rpx;
		background: #ffffff;
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		justify-content: space-around;

		&__unit {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.img {
				width: 48rpx;
				height: 48rpx;
			}

			.text {
				font-size: 26rpx;
				color: #000000;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.pitch-on {
				border-bottom: 1px solid #FFFFFF;
				color: #3172B6;
			}
		}
	}
</style>
